<template>
  <header class="site-header">
    <div class="header-container">
      <div class="header-content">
        <div class="logo">
          <router-link to="/">
            <div class="logo-text">{{ homeInfoData?.titleAbbreviation || 'MHDAL' }}</div>
            <div class="logo-subtitle">{{ homeInfoData?.titleEn || 'Multimodal Health Data and Aging Lab' }}</div>
          </router-link>
        </div>
        <Navigation />
      </div>
    </div>
  </header>
</template>

<script>
import Navigation from './Navigation.vue'

export default {
  name: 'Header',
  components: {
    Navigation
  },
  inject: ['homeInfo'],
  computed: {
    homeInfoData() {
      return this.homeInfo ? this.homeInfo() : null
    }
  }
}
</script>

<style scoped>
.site-header {
  background-color: #5a5a5a;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
}

.logo a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.logo-text {
  font-size: 2.5em;
  font-weight: bold;
  color: #00bcd4;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 3px;
}

.logo-subtitle {
  font-size: 0.65em;
  color: #b0b0b0;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .header-content {
    height: auto;
    padding: 15px 0;
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .logo {
    width: 100%;
    text-align: center;
  }
  
  .logo-text {
    font-size: 2em;
  }
  
  .logo-subtitle {
    font-size: 0.6em;
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 0 15px;
  }
  
  .logo-text {
    font-size: 1.8em;
  }
}
</style>

